<template>
	<div class="authorize">
		<div class="left">
			<p><i class="iconfont icon-qian3"></i>登录领淘宝大额券、现金补贴</p>
			<a @click="authorize"><i class="iconfont icon-taobao1"></i>淘宝一键授权</a>
		</div>
		<van-icon name="clear" size="22" @click="close" />
	</div>
</template>

<script>
export default {
	name: 'authorize',
	methods: {
		authorize() {
			let params = {
				backUrl: '/index'
			};
			this.$service.shopping.taobao.getlink(params).then(res => {
				window.location.href = res;
			});
		},
		close() {
			this.$emit('close');
		}
	}
};
</script>

<style lang="scss" scoped>
.authorize {
	width: 100%;
	height: 70px;
	position: fixed;
	bottom: 120px;
	animation: animate_in 1s linear;
	@include flexBox(center, center);
	z-index: 1000;
	.left {
		width: 654px;
		height: 70px;
		padding: 0 10px 0 34px;
		border-radius: 50px;
		background: rgba(25, 25, 25, 0.8);
		font-size: 24px;
		color: #fff0ce;
		@include flexBox(space-between, center);
		p {
			@include flexBox(null, center);
			i {
				font-size: 32px;
				margin-right: 6px;
			}
		}
		a {
			width: 200px;
			line-height: 48px;
			border-radius: 50px;
			background: linear-gradient(225deg, #f70114, #f77101);
			display: block;
			@include flexBox(center);
			i {
				margin-right: 6px;
			}
		}
	}
	.van-icon-clear {
		margin-left: 12px;
		opacity: 0.5;
	}
}
@keyframes animate_in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
// 判断iphoneX 将 footerBox 的 padding-bottom 填充到最底部
@supports (bottom: env(safe-area-inset-bottom)) {
	.authorize {
		margin-bottom: env(safe-area-inset-bottom);
	}
}
</style>
